$(function () {
  let image = $('#image');

  image.cropper({
    aspectRatio: 1 / 1,
    preview: '.preview',
    zoomable: false,
  });

  // 通用的技巧
  // type=hidden 的这个输入框，一般用来保存后端返回的数据
  // <input type="hidden" name="id" value="222" />
  $('#btnUpload').on('click', function () {
    $('#file').click();
  });

  $('#file').on('change', function (e) {
    let file = e.target.files[0];

    // 怎么样实现图片上传以后的本地预览
    // 利用URL.createObjectURL方法， 生成一个本地的地址
    let imageUrl = URL.createObjectURL(file);
    console.log(imageUrl);
    image
      .cropper('destroy')
      .attr('src', imageUrl)
      .cropper({
        aspectRatio: 1 / 1,
        preview: '.preview',
      });
  });

  $('#btnConfirm').on('click', function () {
    // 下面的内容是 cropperjs 通过 canvas底层 将图片转换为了base64编码的图片
    // 然后发送给服务器
    var dataURL = image
      .cropper('getCroppedCanvas', {
        // 创建一个 Canvas 画布, 这个canvas是一个单独的分支，属于可视化的分支，工作岗位比较少，
        // 我们一般出去工作还是  写后台管理网站比较多一些， 可视化要写 也是使用类似echarts这种插件，不会手写canvas
        width: 100,
        height: 100,
      })
      .toDataURL('image/png');

    // console.log(dataURL);
    $.ajax({
      url: '/my/update/avatar',
      method: 'POST',
      data: {
        avatar: dataURL,
      },
      success: function (res) {
        if (res.status === 0) {
          window.parent.init();
          window.parent.location.href = '/index.html';
        }
      },
    });
  });
});
